<template>
  <div class="loginDiv">
    <el-tabs :tab-position="tabPosition" style="height: 700px;">
      <el-tab-pane label="已有账号">
        <div style="">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="200px" class="formDiv"
                   size="small">

            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-radio-group v-model="loginForm.isAdmin">
                <el-radio label="1">管理员</el-radio>
                <el-radio label="0">普通</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('loginForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册">
        <div style="">
          <el-form ref="registerFrom" :model="registerFrom" label-width="200px" class="formDiv" size="small">
            <el-form-item label="昵称" :rules="{
      required: true, message: '昵称不能为空', trigger: 'blur'
    }">
              <el-input v-model="registerFrom.realname"></el-input>
            </el-form-item>
            <el-form-item label="用户名" :rules="{
      required: true, message: '用户名不能为空', trigger: 'blur'
    }">
              <el-input v-model="registerFrom.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" :rules="{
      required: true, message: '密码不能为空', trigger: 'blur'
    }">
              <el-input v-model="registerFrom.password"></el-input>
            </el-form-item>
            <el-form-item label="座右铭">
              <el-input v-model="registerFrom.motto"></el-input>
            </el-form-item>
            <el-form-item label="目标城市">
              <el-input v-model="registerFrom.aimCity"></el-input>
            </el-form-item>
            <el-form-item label="目标职业">
              <el-input v-model="registerFrom.aimJob"></el-input>
            </el-form-item>
            <el-form-item label="关注话题">
              <el-checkbox-group v-model="registerFrom.type">
                <el-checkbox label="1">java基础</el-checkbox>
                <el-checkbox label="2">数据库</el-checkbox>
                <el-checkbox label="3">网页设计</el-checkbox>
                <el-checkbox label="4">Python</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="从哪里知道我们的">
              <el-radio-group v-model="registerFrom.resource">
                <el-radio label="1">网页浏览</el-radio>
                <el-radio label="2">朋友推荐</el-radio>
                <el-radio label="3">名声在外</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onRegister('registerFrom')">立即创建</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getToken, setToken, removeToken} from '@/utils/auth'

  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          isAdmin: '0'
        },
        registerFrom: {
          realname: '',
          username: '',
          password: '',
          motto: '',
          aimCity: '',
          aimJob: '',
          type: [],
          resource: 3,
        },
        tabPosition: 'left',
        loginRules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        }
      }
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            var params = new URLSearchParams();
            let token = this.loginForm.username;
            params.append('username', this.loginForm.username);
            params.append('password', this.loginForm.password);
            params.append('isAdmin', this.loginForm.isAdmin);
            let _self = this;
            let url = "/login/auth";
            _self.$http.post(url, params)
              .then(function (response) {
                console.log(response.data);
                var _data = response.data
                if (_data.ret == true) {
                  _self.$store.commit('login', token);
                  _self.$router.push('/');
                } else {
                  _self.$message({
                    message: _data.data,
                    type: 'error'
                  })
                }
              }).catch(function (error) {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });


        // axios.post('http://localhost:8999/api/login', params)
        //   .then(function (response) {
        //     this.$router.push('forum')
        //
        //   }).catch(res => {
        //   throw new Error('MaiSec.vue: ', res)
        // })
      },
      onRegister(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var params = new URLSearchParams();
            params.append('username', this.registerFrom.username);
            params.append('password', this.registerFrom.password);
            params.append('realname', this.registerFrom.realname);
            params.append('type', this.registerFrom.type);
            params.append('resource', this.registerFrom.resource);
            params.append('motto', this.registerFrom.motto);
            params.append('aimCity', this.registerFrom.aimCity);
            params.append('aimJob', this.registerFrom.aimJob);
            let _self = this;
            let url = "/login";
            _self.$http.post(url, params)
              .then(function (response) {
                console.log(response.data)
                var result = response.data;
                if (result.ret == true) {
                  _self.$message({message: "注册成功，请登录", type: 'success'})
                } else {
                  alert(result.data);
                }
                // _self.$router.push('forum')
              }).catch(function (error) {
              console.log(error);
            });
          } else {
            _self.$message({message: "已存在用户名，请直接登录", type: 'error'})
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .loginDiv {
    width: 60%;
    height: 900px;
    margin-top: 2%;
    /*background-color: #EEEEEE;*/
    background-color: #ffffff;
    margin-left: 5%;
    margin-right: 5%;
  }

  .formDiv {
    margin-top: 10px;
    background-color: #ffffff;
    /*margin-left: 15%;*/
    margin-right: 15%;
  }
</style>
